<template>
  <div>
    <MarkdownEditor v-model="content" :height="height" :action="action" :data="params" :headers="headers" :enable-color-syntax="true" :enable-chart="true" :enable-uml="true" />
  </div>
</template>

<script>
import MarkdownEditor from '@/components/MarkdownEditor'
import { getToken } from '@/utils/auth'

export default {
  name: 'MEditor',
  components: { MarkdownEditor },
  props: {
    value: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      content: '',
      action: process.env.VUE_APP_BASE_API + '/sys/common/qiniu/upload',
      params: {
        shard: 'markdown'
      },
      headers: { Authorization: getToken() || '' }
    }
  },
  watch: {
    // 调用者、MEditor、MarkdownEditor祖孙三代通信，保证调用者修改content的变化能够传递到MarkdownEditor
    value(newValue, preValue) {
      if (newValue !== preValue && newValue !== this.content) {
        this.content = newValue
      }
    },
    content(newValue) {
      this.$emit('input', newValue)
    }
  },
  created() {
    this.content = this.value
  }
}
</script>
